<template>
    <section>
        <div class="servic-render servic-render__2">
            <div class="render-tit">
                热门头条 {{newsload}}
            </div>
            <ul class="mui-table-view mui-table-view-border render-hot-table" id="J_hotLines">
                <li class="mui-table-view-cell mui-media render-hot-cell" v-for="item in news" :key="item.id">
                    <a href="javascript:;" :data-url="item.url">
                        <img class="mui-media-object mui-pull-left hot__img" :src="item.picUrl" />
                        <div class="mui-media-body hot-entry clearfix">
                            <h1 class="entry__name mui-ellipsis-2">[&nbsp;{{item.title}}&nbsp;]</h1>
                            <p class="entry__text mui-ellipsis"></p>
                            <span class="entry__btn" href="javascript:;">详情介绍<b>></b></span>
                        </div>
                    </a>
                </li>
            </ul>
            <div class="render-more" @click="getScrollData">{{loadMsg}}</div>
        </div>
    </section>
</template>
<script>
    import { mapState } from 'vuex'
    import { mapActions } from 'vuex'
    import { mapGetters } from 'vuex'
    import { FETCH_NEWS } from '../../constants/actionTypes'
    import ajax from '../../utils/ajax'
    import tool from '../../utils/tool'
    export default {
        data() {
            return {
                searchKey: {
                    page: 0,
                    limit: 5,
                    tab: 'all',
                    mdrender: true
                },
                isFetching: false,
                loadMsg: "加载更多",
                scroll: false
            }
        },
        replace: true,
        props: {
            // list: Array
        },
        mounted() {
            this.getNewsLoad();
            // 如果从详情返回并且之前存有对应的查询条件和参数
            // 则直接渲染之前的数据
            // if (window.window.sessionStorage.news) {
            //     alert(11);
            //     this.news = JSON.parse(window.window.sessionStorage.news);
            //     this.searchKey = JSON.parse(window.window.sessionStorage.searchKey);
            //     this.$nextTick(() => $(window).scrollTop(window.window.sessionStorage.scrollTop));
            // } else {
            //     this.getNewsLoad();
               
            // }
            // this.getScrollData();
        },
        computed: {
            // 使用对象展开运算符将 getters 混入 computed 对象中
    		...mapGetters({
                news: 'newsLoad',
                total:'newsTotals'
            }),
            ...mapState({
                list: state => state.home
            })
        },
        methods: {
            ...mapActions([FETCH_NEWS]),
            getNewsLoad() {
                var vm = this;
                let setting = {
                    url: "phoneAppManager/getAppInfosByCode",
                    data: {
                        code: "600008",
                        start: vm.searchKey.page,
                        iDisplayLength: vm.searchKey.limit
                    },
                    callback: "succerNews",
                    error: function (res) {
                        // console.log(res)
                    }
                }
                new ajax(setting);

                window.succerNews = function (res) {
                    vm.scroll = true;
                    let list = {};
                    res = tool.clear(res);
                    res = tool.JSONParse(res);
                    list.list = res.data.appModuleInfos;
                    list.totals = res.data.totals;
                    list.limit = vm.searchKey.limit;

                    vm.FETCH_NEWS(list)
                }
            },
            getScrollData() {
                if (this.scroll) {
                    this.scroll = false;
                    // console.log(this.list);
                    this.loadMore();
                    this.getNewsLoad();
                }
            },
            loadMore() {
                let list = this.list.newsload;
                let limit = this.list.limit;
                let totals = this.$store.state.home.totals;

                if (!list.length || totals < limit) {
                    this.isFetching = true
                    this.loadMsg = "没有了"
                } else {
                    this.isFetching = false
                    this.loadMsg = "加载更多"
                }
                this.searchKey.limit = limit + 5
            }
        }
    };

</script>
<style>

</style>